<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>欢迎来到商品列表</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
    .caption p{
    text-overflow: ellipsis;
    overflow : hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;    
    }
    .container .row img{
    height:200px;
    }
    
    </style>
</head>
<body>
    <div class="page-header">
        <h1><img src="images/3.png" alt=""> &nbsp;商品列表页 &nbsp;<small>欢迎来到京东购物</small></h1>
    </div>
    <div class="container">
        <div class="row">
            
        </div>
    </div>
</body>
<script src="js/promiseAjax.js"></script>
<script src="js/page1.js"></script>
<script>
    pAjax({
        url:"php/list.php",
    }).then(function(res){
        var total=res.length;
        var pageSize=12;
        new Page({
            pageData:{
                total:total,
                pageSize:pageSize
            },
            language:{
                first:"首页",
                previous:"上一页",
                next:"下一页",
                last:"尾页"
            }
        },function(currentPage){
            var str='';
            var arr=res.slice((currentPage-1)*pageSize,currentPage*pageSize);
            for(var i=0;i<arr.length;i++){
           str+=`
           <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="${arr[i].imgpath}">
                <div class="caption">
                     <h3>${arr[i].name}</h3>
                    <p>${arr[i].introduce}</p>
                    <p><a href="details.html?id=${arr[i].id}" class="btn btn-primary" role="button">查看详情</a></p>
                </div>
                </div>
            </div>         
           `
       }
       document.querySelector(".container .row").innerHTML=str;
        })
    })
</script>
</html>